<template>
  <view>
    <u-picker
      :show="show"
      ref="uPicker"
      keyName="name"
      :columns="columns"
      :title="title"
      @cancel="show = false"
      @confirm="confirm"
    ></u-picker>

    <u-form-item v-bind="$attrs" borderBottom @click="deptPicker">
      <u--input
        v-model="deptName"
        :placeholder="placeholder"
        border="none"
        disabled
        disabledColor="#ffffff"
      ></u--input>
      <u-icon slot="right" name="arrow-right"></u-icon>
    </u-form-item>
  </view>
</template>

<script>
import { workUnitApproverAPI } from "@/api/api.js";
export default {
  props: ["value", "multiple", "title", "placeholder"],
  data() {
    return {
      deptName: "",
      show: false,
      columns: [],
    };
  },
  methods: {
    deptPicker() {
      this.show = true;
    },
    confirm(e) {
      this.deptName = e.value[0].name;
      this.$emit("input", e.value[0].id);
      this.show = false;
    },
  },
  mounted() {
    workUnitApproverAPI({}).then((res) => {
      this.columns = [res.data.bm];
    });
  },
};
</script>

<style></style>
